import React from 'react';
import { Button, Row, Col, Tooltip } from 'antd';
import UserList from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import FilterTool from '../../../../components/FilterTool';
import Add from './add';
import Map from './map';
import Quote from './quote';
import Detail from './detail';
import Modal from '../../../../components/Modal/index';
import ExpandedList from './expandedList';
import RelationStrategy from '../../../Strategy/Strategy/relation';
import RelationComponent from '../../../Strategy/Strategy/Component/relation';

class ModelIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'model';
    this.addComponent = '/variable/model/index/add';
    this.editComponent = Add;
    this.listsComponent = UserList;
    this.queryParams = {};
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.state = {
      ...this.state,
    };

    this.model_width = 500;
  }
  componentDidMount() {}

  detail = (record) => {
    Modal.open({
      title: '参数详情',
      width: '1000px',
      content: <Detail closeModal={this.closeModal} {...this.props} record={record} />,
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  map = (record) => {
    Modal.open({
      title: '字段映射',
      width: '1000px',
      content: <Map closeModal={this.closeModal} {...this.props} record={record} />,
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  quote = () => {
    Modal.open({
      title: 'API模型',
      width: '600px',
      content: <Quote {...this.props} closeModal={this.closeModal} />,
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  showRelationComponent = (record) => {
    Modal.open({
      title: (
        <>
          关联组件<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span>
        </>
      ),
      width: '1000px',
      content: (
        <RelationComponent
          record={record}
          param={{ strategy_type: 1, type: 'model_list', field_id: record.model_list_id }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  // 关联策略
  showRelationStrategy = (record) => {
    Modal.open({
      title: (
        <>
          关联策略<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span>
        </>
      ),
      width: '1000px',
      content: (
        <RelationStrategy
          record={record}
          param={{ strategy_type: 2, type: 'model_list', field_id: record.model_list_id }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  getColumns = () => {
    return [
      {
        title: '模型ID',
        key: 'model_list_id',
        dataIndex: 'model_list_id',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '模型服务名称',
        key: 'name',
        dataIndex: 'name',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '模型名称',
        key: 'model_code',
        dataIndex: 'model_code',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '版本',
        key: 'model_version',
        dataIndex: 'model_version',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '关联组件',
        dataIndex: 'assemblySum',
        key: 'assemblySum',
        ellipsis: true,
        align: 'center',
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationComponent.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '关联策略',
        dataIndex: 'strategySum',
        key: 'strategySum',
        ellipsis: true,
        align: 'center',
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationStrategy.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_user_name
            ? `${record.create_user_name}/${record.update_user_name}`
            : `${record.create_user_name}/${record.create_user_name}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        },
      },
    ];
  };

  expandedRowRender = (record) => {
    return <ExpandedList value={record.listMap} record={record} queryList={this.freshQueryList} />;
  };

  render() {
    const ListsComponent = this.listsComponent;

    const data = [
      {
        type: 'Search',
        key: 'name',
        name: 'name',
        defaultValue: '',
        placeholder: '请输入模型名称进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.add.bind(this, { title: '添加模型' })}>
              添加模型
            </Button>
            <Button onClick={this.quote} style={{ marginLeft: '10px' }}>
              引用API模型
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='end'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            rowKey='model_list_id'
            edit={this.edit}
            queryList={this.freshQueryList}
            clearSelected={this.clearSelected}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
            map={this.map}
            detail={this.detail}
            expandedRowRender={this.expandedRowRender}
          />
        </div>
      </div>
    );
  }
}

export default ModelIndex;
